<template>
  <cm-popup cm-class="cm-border-radius-5" ref="popup"
    :height="height"
    :mask-closed="maskClosed"
    direction="center" width="80%">
    
    <view class="cm-flex cm-flex-col cm-content">
      <!-- 弹框头部 -->
      <view class="cm-modal-header">
        <view class="cm-modal-title cm-text-18 cm-text-center" v-if="title && title !== ''">{{ title }}</view>
        <slot name="header" v-else></slot>
      </view>
      <!-- 弹框中部内容 -->
      <view class="cm-modal-content cm-flex-g-1">
        <view class="cm-padding-10" v-if="type !== 'slot'">
          <view>{{ content }}</view>
          <cm-input v-if="type === 'input'" cm-class="cm-margin-top-10"
            v-model="modalInput" border :placeholder="inputHolder"></cm-input>
        </view>
        <slot v-else></slot>
      </view>
      <!-- 弹框底部按钮 -->
      <view class="cm-modal-footer">
        <view class="cm-flex app-border-color_ex-top" v-if="!bottomDisabled">
          <cm-button class="cm-flex-g-1"
            padding-floor="15"
            :border="false" outlined
            @click="cancelHandler"
            v-if="cancelTxt && cancelTxt !== ''">取消</cm-button>
          <view class="cm-modal-split"></view>
          <cm-button class="cm-flex-g-1"
            type="primary"
            padding-floor="15"
            @click="confirmHandler"
            :border="false" outlined
            v-if="confirmTxt && confirmTxt !== ''">确定</cm-button>
        </view>
        <slot name="footer" v-else></slot>  
      </view>    
    </view>
    
  </cm-popup>
</template>

<script src="./cm-modal.js"></script>

<style lang="stylus">
@import './cm-modal.styl'
</style>
